<template>
  <div>
    <div class="div1">
      <div class="div1_title">活动与属性</div>
      <ul>
        <li><span class="bar">减</span><span>满30减5，满60减15</span></li>
        <li v-for="(item,index) in shop_all.supports" :key="index"><span
            class="bar">{{item.icon_name}}</span><span>{{item.description}}(App专享)</span></li>
      </ul>
    </div>
    <div class="div2">
      <div class="div2_title">
        <span>食品监督安全公示</span><span class="div2_span1">企业认证详情</span>
      </div>
      <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2807320317,978551943&fm=26&gp=0.jpg" alt=""
          class="img1">
        <div class="div2_01">监督检查结果:<span>良好</span></div>
        <div class="div2_02">检查日期:2016-6-5</div>
      </div>
    </div>
    <div class="div3">
      <div class="div3_title">商家信息</div>
      <ul>
        <li>{{shop_all.name}}</li>
        <li>地址:{{shop_all.address}}</li>
        <li>营业时间:{{shop_all.opening_hours}}</li>
        <li>营业执照</li>
        <li>餐饮服务许可证</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import Cookie from "js-cookie";
  export default {
    name: "shopDetail",
    data() {
      return {
        shop_all: {},
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.shop_all = Cookie.get("shopId");
        const request1 = vm.axios.get("https://elm.cangdu.org/shopping/restaurant/" + vm.shop_all);
        vm.axios.all([request1]).then(vm.axios.spread((res1) => {
          vm.shop_all = res1.data;
        })).catch(err => console.log(err));
        vm.$store.commit("changeTitle", "商家详情");
        vm.$store.commit("changeShowBack", true);
      });
    },
    // created() {
    //   let datas = {
    //     userId: 111,
    //     shopId: 222,
    //     foodId: 333,
    //     foodName: "汉堡",
    //     foodCount: 2,
    //     foodPrice: 5,
    //   };
    //   console.log(datas);
      
    //   this.axios.post("http://127.0.0.1:9988/addNo_order", { name: "张三" }).then((res) => {
    //     console.log(res)
    //   }).catch((err) => {
    //     console.log(err);
    //   });
    // }
  }
</script>
<style lang="less" scoped>
  .div1,
  .div2,
  .div3 {
    background-color: white;
    margin-top: 0.3rem;
    padding-left: 0.4rem;
    text-align: left;
  }

  .div1_title {
    font-size: .5rem;
    line-height: 1rem;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: .3rem;
  }

  .bar {
    background-color: coral;
    margin-right: 0.3rem;
  }

  .div1>ul>li {
    font-size: 0.35rem;
    padding: 0.2rem 0;
    letter-spacing: 0.02rem;
  }

  .div2 {
    padding: 0.3rem 0 0.3rem 0.4rem;
    overflow: hidden;
  }

  .img1 {
    width: 1.5rem;
    float: left;
    margin-right: 0.3rem;
  }

  .div2_title {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .div2_01 {
    margin-right: 40%;
    margin-top: 0.3rem;
  }

  .div2_01,
  .div2_02 {
    float: left;
    font-size: 0.35rem;
  }

  .div2_span1 {
    font-size: 0.4rem;
    color: darkgrey;
    margin-right: 0.4rem;
  }

  .div3 {
    padding: 0.3rem 0 0.3rem 0.4rem;
  }

  .div3_title {
    font-size: 0.5rem;
    margin-bottom: 0.3rem;
  }

  .div3>ul>li {
    font-size: 0.38rem;
    padding: 0.3rem 0;
    letter-spacing: 0.02rem;
  }
</style>